<template>
    <div class="my-account-details">
        <!-- :style="{ background: '#fff', color: '#919499', fontSize: '12px' }" -->
        <a-table :columns="styledColumns" :scroll="{ x: 800, y: 500 }" @change="changeTable" :pagination="pagination"
            :data-source="tableData" :row-key="'orderId'" :style="style">
        </a-table>
    </div>
</template>

<script setup>
import { ref, inject, onMounted, computed } from "vue";
const style = ref({});
const headStyle = ref({});
// const accountParams = inject("accountParams", ref({}));
const columns = inject("tableColumns", []);
const tableData = inject("tableSource", []);
const tableStyle = inject("tableStyle", {});
const paginaTable = inject('tablePagination', [])

let pagination = {}



onMounted(() => {
    console.log("组件挂载，初始参数：");
    generateTable();
});
// 生成表格数据
const generateTable = () => {
    console.log(paginaTable, 'paaaaaaaaaaaaaa');
    if (paginaTable.current) {
        pagination = {
            current: paginaTable.current,
            size: paginaTable.size,
            total: paginaTable.total
        }
    } else {
        pagination = false
    }

    //   if (!params || !params.transType) return;
    // 更新列
    style.value = {
        fontSize: tableStyle.fontSize || "12px",
    };
    headStyle.value = {
        background: tableStyle.background || "#fff",
        color: tableStyle.color || "#919499",
    };
    console.log(style.value, headStyle.value, pagination, "eeeeeeeeeee");
};

const changeTable = (e) => {

    e.isChange = true
    console.log(e, 'eeeeeeeeeeewwwwwwwwwwqqqqqqqqq');
    localStorage.setItem('pagePagination', JSON.stringify(e))
}

const styledColumns = computed(() => {
    console.log(columns, 'columnscolumnscolumnscolumnscolumns');
    if (columns) {
        return columns.map((col) => ({
            ...col,
            customHeaderCell: () => ({
                style: {
                    background: tableStyle.background || "#fff", // 表头背景颜色
                    color: tableStyle.color || "#919499", // 表头文字颜色
                    fontSize: tableStyle.fontSize || "12px", // 表头字体大小
                },
            }),
        }))
    } else {
        return []
    }

});
</script>

<style scoped>
.my-transaction-details-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.my-transaction-details {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    padding: 4px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    z-index: 99999;
}

:deep(.buy-direction) {
    color: red;
    font-weight: bold;
}

:deep(.sell-direction) {
    color: green;
    font-weight: bold;
}


/* :deep(.ant-table-thead > tr > th) {
    background: #fff !important;
    color: #919499 !important;
  } */
</style>